<template>
    <transition name="move">
        <div class="search-result" v-show="searchFlag">
            <div class="search-title">
                <span class="text">搜索</span>
                <span class="iconfont header-back" @click="hide">&#xe624;</span>
            </div>
            <div class="result-wrapper">
                <i class="search-icon"></i>
                <input type="text" @focus="inputFocus" class="result-input" v-model="searchResult" placeholder="搜索" />
            </div>
            <split></split>
            <!-- 热搜 -->
            <div class="hot-search" v-show="hotFlag">
                <div class="hot-title">
                    <i class="hot-icon"></i>
                    <h3>热搜</h3>
                </div>
                <!-- 取前5条 -->
                <ul class="hot-item">
                    <router-link :to="'/detailNews/' + item.id" class="hot-list" v-for="(item,index) in hotNewsList" :key="item.id" tag="li">{{item.title}}</router-link>
                </ul>
            </div>
            <!-- 搜索结果 -->
            <div class="result-info" v-show="!hotFlag">
                <ul class="result-info-item">
                    <router-link :to="'/detailNews/' + item.id" class="result-info-list" v-for="(item,index) in list" :key="item.id" tag="li">{{item.title}}</router-link>
                </ul>
            </div>
            <!-- 暂无搜索结果 -->
            <div class="no-result" v-show="!list.length && searchResult">暂无搜索结果</div>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import Split from 'base/split/split.vue'
    export default {
        props: {
            total: {
                type: Number
            }
        },
        data () {
            return {
                searchResult: '',
                searchFlag: false,
                hotNewsList: [],
                hotFlag: true,
                hotspotListAll: [],
                list: [],
                num: 1,
                totalNum: 0
            }
        },
        methods: {
            show () {
                this.searchFlag = true
            },
            hide () {
                this.searchFlag = false
            },
            // 获得焦点
            inputFocus () {
            },
            // 获取全部数据
            getHotSpotInfo () {
                axios.get('/api/index.php?g=Api&m=Guanwang&a=gonggao&page='+ this.num +'&size=' + this.totalNum +'').then((res) => {
                    res = res.data
                    this.hotspotListAll = res.list
                    this.hotNewsList = res.list.slice(0,5)
                })
            }
        },
        watch: {
            total (newVal) {
                this.totalNum = newVal
                this.getHotSpotInfo()
            },
            searchResult (newVal) {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                for (let m in this.list) {
                    var value = this.list[m].title
                    if(value.indexOf(this.searchResult) > -1 && this.searchResult) {
                        return
                    }
                }
                if (this.searchResult != "") {
                    this.hotFlag = false
                } else {
                    this.hotFlag = true
                }

                this.timer = setTimeout(() => {
                    let result = []
                    if(this.searchResult === "") {
                        result = []
                        this.list = []
                        this.hotFlag = true
                        return
                    }
                    for (let i in this.hotspotListAll) {
                        let value = this.hotspotListAll[i].title
                        if(value.indexOf(this.searchResult) > -1) {
                            result.push(i)
                        }
                    }
                    for(let k in result) {
                        this.list = this.list.concat(this.hotspotListAll[result[k]])
                    }
                },100)
            }
        },
        components: {Split}
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    .search-result
        width: 100%
        height: 100%
        position: fixed
        z-index: 999
        background: #fff
        top: 0
        left: 0
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .search-title
            width: 100%
            height: 40px
            background: #0094d4
            line-height: 40px
            margin: 0
            padding: 0 15px
            box-sizing: border-box
            text-align: center
            position: relative
            color: #fff
            .header-back
                font-size: 16px
                position: absolute
                left: 15px
                top: 0px
        .result-wrapper
            margin-left: 15px
            margin-right: 15px
            height: 40px
            background: #fff
            position: relative
            margin-top: 10px
            margin-bottom: 10px
            .search-icon
                position: absolute
                width: 16px
                height: 16px
                background: url('./search-icon.png') no-repeat
                background-size: 100% 100%
                top: 13px
                left: 10px
            .result-input
                width: 100%
                background: #efeff4
                box-sizing: border-box
                height: 40px
                border: none
                border-radius: 0
                padding: 0 15px 0 35px
                line-height: 40px
                font-size: 16px
        .hot-search
            width: 100%
            height: 250px
            background: #fff
            .hot-title
                box-sizing: border-box
                margin: 0 15px
                height: 40px
                line-height: 40px
                border-bottom: 1px solid #eee
                .hot-icon
                    display: inline-block
                    background: url('./hot-icon.png') no-repeat
                    width: 16px
                    height: 16px
                    background-size: 100% 100%
                    vertical-align: middle
                h3
                    
                    display: inline-block
                    vertical-align: middle
            .hot-item
                box-sizing: border-box
                margin: 0 15px
                .hot-list
                    ellipsis()
                    height: 40px
                    line-height: 40px
                    border-bottom: 1px solid #eee
                    font-size: 14px
        .result-info
            width: 100%
            .result-info-item
                .result-info-list
                    box-sizing: border-box
                    margin: 0 15px
                    height: 40px
                    line-height: 40px
                    border-bottom: 1px solid #eee
                    font-size: 14px
                    ellipsis()
        .no-result
            box-sizing: border-box
            margin: 0 15px
            height: 40px
            line-height: 40px
            border-bottom: 1px solid #eee
            font-size: 14px
            color: #888
</style>